<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 *{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
			 li{list-style: none;}
			#wrapper{
				width: 790px;
				height: 340px;
				position: relative;
				margin:150px auto;
			}
			#wrapper .pic{
				width: 100%;
				height: 100%;
			}
			#wrapper .pic ul li{
				position: absolute;
				top: 0;
				left:0;
				width: 100%;
				height: 100%;
				display: none;
			}
			#wrapper .pic ul li.on{
				display: block;
			}
			#wrapper .tab{
				position: absolute;
				bottom: 10px;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				background: rgba(0,0,0,0.5);
				padding: 5px 10px;
				border-radius: 30px;
			}			
			#wrapper .tab ul{
				
			}
			#wrapper .tab ul li{
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background:#fff;
				float: left;
				margin:3px 5px;
				cursor: pointer;
			}
			#wrapper .tab ul li.on{
				background: orange;
			}
			.btn{
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				font-size: 30px;
				color: #fff;
				cursor: pointer;
			}
			.btn:hover{
				background: rgba(0,0,0,0.4);
				-webkit-user-select: none;
			}
			.pre{
				left: 0;
				border-radius:0 10px 10px 0;
			}
			.next{
				right: 0;
				border-radius:10px 0px 0px 10px;
				
			}
		</style>
	</head>
	<body onselect="return false">
		<div id="wrapper">
			<div class="pic">
				<ul>
					<li>
						<img src="images/banner1.jpg" />
					</li>
					<li>
						<img src="images/banner2.jpg" />
					</li>
					<li>
						<img src="images/banner3.jpg" />
					</li>
					<li>
						<img src="images/banner4.jpg" />
					</li>
					<li>
						<img src="images/banner5.jpg" />
					</li>
					<li>
						<img src="images/banner6.jpg" />
					</li>
				</ul>
			</div>
			<div class="tab">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="btn pre">&lt;</div>
			<div class="btn next">&gt;</div>
		</div>
		<script>
		!(function(){
			function luenBo(oWrapper,aPicLi,aTabLi,aBtn){//构造函数
				this.oWrapper = oWrapper;
				this.aPicLi = aPicLi;
				this.aTabLi = aTabLi;
				this.aBtn = aBtn;
				this.len = aTabLi.length;
				this.num = 0;
				this.timer = null;
				this.init();
				this.Tab();
				this.BtnClick();
				this.auto();
			}
			luenBo.prototype = {
				init:function(){
					this.aPicLi[0].className = 'on';
					this.aTabLi[0].className = 'on';
				},
				Tab:function(){
					var This = this;
					for (var i = 0; i < this.len; i++) {
						this.aTabLi[i].index = i;
						this.aTabLi[i].onclick = function(){
							var eIndex = this.index;
							This.change(function(){
								This.num = eIndex;
							})
						}
					}
				},
				BtnClick:function(){
					var _this = this;
					for (var j = 0; j < 2; j++) {
						_this.aBtn[j].j = j;
						_this.aBtn[j].onclick = function(){
							var eJ = this.j
							_this.change(function(){
								if(eJ){//点击下一张 next
									_this.num++;
									if(_this.num>_this.len-1){
										_this.num = 0
									}
								}else{//点击上一张 pre
									_this.num--;
									if(_this.num<0){
										_this.num = _this.len-1
									}
								}
							})
						}
					}
				},
				auto:function(){
					var _this = this;
					_this.timer = setInterval(function(){
						_this.change(function(){
							_this.num++;
							if(_this.num>_this.len-1){
								_this.num = 0
							}	
						})
					},2000);
					_this.oWrapper.onmouseenter = function(){
						clearInterval(_this.timer);
					};
					_this.oWrapper.onmouseleave = function(){
						_this.auto();
					};
				},
				change:function(fn){
					this.aTabLi[this.num].className = '';
					this.aPicLi[this.num].className = '';
					fn();
					this.aTabLi[this.num].className = 'on';
					this.aPicLi[this.num].className = 'on';
				}
			};
			
			!(function(){
				var oWrapper = document.getElementById('wrapper');
				var aPic = document.getElementsByClassName("pic")[0];
				var aPicLi = aPic.getElementsByTagName('li');
				var aTab = document.getElementsByClassName('tab')[0];
				var aTabLi = aTab.getElementsByTagName('li');
				var aBtn = document.getElementsByClassName('btn');	
				new luenBo(oWrapper,aPicLi,aTabLi,aBtn)//实例化
				
			})();
			
		})()
			
			
			
			
//			for (var i = 0; i < len; i++) {
//				aTabLi[i].index = i;
//				aTabLi[i].onmouseover = function(){
//					aTabLi[num].className = '';
//					aPicLi[num].className = '';
//					aTabLi[this.index].className = 'on';
//					aPicLi[this.index].className = 'on';
//					num = this.index;
//					console.log(num)
//				}
//			}
//			
//			for (var j = 0; j < 2; j++) {
//				aBtn[j].j = j;
//				aBtn[j].onclick = function(){
//					if(this.j){//点击下一张 next
//						aTabLi[num].className = '';
//						aPicLi[num].className = '';
//						num++;
//						console.log(num)
//						console.log(len)
//						if(num>len-1){
//							num = 0
//						}
//						aTabLi[num].className = 'on';
//						aPicLi[num].className = 'on';
//						
//					}else{//点击上一张 pre
//						aTabLi[num].className = '';
//						aPicLi[num].className = '';
//						num--;
//						console.log(num)
//						console.log(len)
//						if(num<0){
//							num = len-1
//						}
//						aTabLi[num].className = 'on';
//						aPicLi[num].className = 'on';
//						
//					}
//				}
//			}
//			
//			var timer =setInterval(function(){
//				aTabLi[num].className = '';
//				aPicLi[num].className = '';
//				num++;
//				console.log(num)
//				console.log(len)
//				if(num>len-1){
//					num = 0
//				}
//				aTabLi[num].className = 'on';
//				aPicLi[num].className = 'on';
//			},2000)
//			
//			oWrapper.onmouseover = function(){
//				clearInterval(timer);
//			}
//			oWrapper.onmouseleave = function(){
//				
//				setInterval(function(){
//				aTabLi[num].className = '';
//				aPicLi[num].className = '';
//				num++;
//				console.log(num)
//				console.log(len)
//				if(num>len-1){
//					num = 0
//				}
//				aTabLi[num].className = 'on';
//				aPicLi[num].className = 'on';
//			},2000)
//			}
		</script>
	</body>
</html>
